<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="./webjars/jquery-ui/1.12.1/jquery-ui.css">
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}

.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.top {
	height: 60px;
	background-color: #E6E6FA;
	flex-grow: 0;
	color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
}
.top>div>h3{
       float: left;
       padding-left: 1em;
       display: inline-block;
         
}
.top>div>div{
  float: right;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top>div>div> span{
    margin-top: 20px; 
}
.center {
	background-color: blue;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
}

.bottom {
	height: 50px;
	background-color: #00BFFF;
	flex-grow: 0;
	text-align: center;
}

.leftMenu {
	width: 200px;
	 flex-flow 0;
	background-color:#d9d6c3;
}

.workspace {
  flex-grow: 1;
  background: white;
  text-align: left;
}
.ui-accordion .ui-accordion-content{
 padding: 1em 0.5em;
}
.ui-accordion .ui-accordion-content .ui-widget .ui-widget-content{
       border-width: 0;
}
.ui-accordion .ui-accordion-content .ui-menu .ui-menu-item{
    line-height: 2em;
}
#work{
  padding: 2em;
}
</style>
<script type="text/javascript" src="webjars/jquery/3.5.1/dist/jquery.js"></script>
<script type="text/javascript" src="webjars/jquery-ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="static/custom.js"></script>
 <script type="text/javascript">
     $(function(){
           $('#accordion').accordion({
        	   collapsible: true  ,
        	   heightStyle: 'fill' 
               });
           
            $('.mainMenu li').click(function(){
                var self=$(this);
                var url=self.attr('id');
                $('#work').load(url);
              });

            
            $('.mainMen li').click(function(){
                  var self=$(this);
                  var url=self.attr('id');
                  $('#work').load(url);
                });
            $('.mainMenA li').click(function(){
                var self=$(this);
                var url=self.attr('id');
                $('#work').load(url);
              });
  
     });
     
 </script>
</head>
<body>
	<div class="container">
		<div class="top">
		<div>
		    <h3>成绩管理程序</h3>
		    <div>
		    <span>欢迎你！
		    <sec:authorize access="!hasRole('ROLE_DIY')">
		   <sec:authentication property="principal.name"/>
		    </sec:authorize>
		    <a href="logout" style="margin-left: 1em;">注销</a></span>
		    </div>
		</div>
		</div>
		<div class="center">
			<div class="leftMenu" >
			<div id="accordion">
			<h3>学生权限</h3>
               <div>
              <ul class="mainMenu">
              <li id="file/manage"><a>头像上传</a></li>
              <li id="grade/grcjcx"><a>个人成绩查询</a></li>
              <li id=grade/bjcjcx><a>班级成绩查询</a></li>
              </ul>
               </div>
               <h3>教师权限</h3>
               <div>
               <sec:authorize access="hasRole('ROLE_TECAHER')||hasRole('ROLE_ADMIN')">
                 <ul class="mainMen">
              <li id="course/manage" ><a>课程管理</a></li>
              <li id="student2/manage"><a>学生管理</a></li>
              <li id="grade/bjcjlr"><a>班级成绩录入</a></li>
              <li id="grade/personGradelr"><a>个人成绩录入</a></li>
               </ul>
              </sec:authorize>
               </div>
                   <h3>管理员权限</h3>
                    <div>
                    <sec:authorize access="hasRole('ROLE_ADMIN')">
                    <ul class="mainMenA">
                <li id="tbclass/manage"><a>班级管理</a></li>                    
                    </ul>
                    </sec:authorize>
                    </div>
                  </div>
			</div>
			<div class="workspace" id="work">
			    <h3>项目简介</h3>
			 1.本项目为成绩管理系统，学生用户名为学号，默认密码为1111<br>
			 2.学生用户登录，只能查看学生权限，教师和管理员选项为空白，请知悉。<br>
			 3.教师用户，管理员选项为空白。管理员用户，选项皆可查看。<br>
			 4.本项目仅供参考，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。<br>
			 5.本项目有些许不完美，如有建议，请联系作者Q:1516128736<br>
			</div>
		</div>
		<div class="bottom">@最终解释权归本网站所有。</div>
	</div>
</body>
</html>